<template>
  <div class="rightTop">
    <h1>设备运行状态</h1>
    <div class="rightTopContent">
      <ul>
        <li>
          <div>
            <span class="allDisCenter">正在运行</span>
            <b class="brilliant allDisCenter">{{eqObj.normalNum}}</b>
          </div>
        </li>
        <li>
          <div>
            <span class="allDisCenter">保养中</span>
            <b class="yellow allDisCenter">{{eqObj.maintainNum}}</b>
          </div>
        </li>
        <li>
          <div>
            <span class="allDisCenter">停机待修</span>
            <b class="red allDisCenter">{{eqObj.repairNum}}</b>
          </div>
        </li>
        <li>
          <div>
            <span class="allDisCenter">设备总数</span>
            <b class="white allDisCenter">{{eqObj.equipNum}}</b>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    eqObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
.rightTop {
  height: 60%;
  h1 {
    font-size: 20px;
    color: #fff;
    text-align: left;
    height: 60px;
    line-height: 40px;
    padding: 25px 0 0 50px;
    margin: 0;
  }
  .rightTopContent {
    height: calc(100% - 60px);
    ul {
      overflow: hidden;
      height: 100%;
      padding: 10px 25px 0 25px;
      li {
        width: 50%;
        height: 50%;
        float: left;
        padding: 10px;
        div {
          border: 1px solid #098fa9;
          height: 100%;
          .brilliant {
            color: #02fb14;
          }
          .yellow {
            color: #fdad00;
          }
          .red {
            color: #fd1616;
          }
          .white {
            color: #fff;
          }
          span {
            color: #05becd;
            width: 100%;
            height: 30%;
            font-size: 18px;
            padding-top: 10%;
          }
          b {
            width: 100%;
            height: 60%;
            font-size: 28px;
          }
        }
      }
    }
    .echartsBox {
      width: 100%;
      padding: 0 15px;
      height: calc(93% - 30px);
    }
  }
}
</style>
